<template>
  <div class="project-safety" ref="projectSafety" style="width: 100%; height: 100%">
    <div class="until_title">安全文明管理</div>
    <div class="project-safety-com" :style="{height: `${height}px`}">
      <div class="left" style="width: 115px">
        <p class="t-center project-title">WIFI安全教育</p>
        <p class="t-center project-number">{{safetyculter.educationcnt}}</p>
        <p class="t-center">累计教育人次</p>
        <div style="padding-left: 15px">
          <div class="wifi-bar" :style="{marginLeft: `${wifiBarFun}px`}">
            <div class="wifi-history-head"></div>
            <div class="wifi-history-body relative" :style="{height: `${wifiHeight.history}px`}">
              <div class="absolute history-data" v-if="safetyculter.historyRightPercent">
                <div class="left wifi-bar-bg"></div>
                <div class="left">
                  <p class="wifi-bar-text">{{history}}%</p>
                  <p>历史</p>
                </div>
              </div>
            </div>
            <div class="wifi-history-bottom"></div>
            <div class="wifi-bar-today relative" :style="{height: `${wifiHeight.today}px`}">
              <div class="absolute today-data" v-if="safetyculter.todayRightPercent">
                <div class="left wifi-bar-bg"></div>
                <div class="left">
                  <p class="wifi-bar-text">{{today}}%</p>
                  <p>今日</p>
                </div>
              </div>
            </div>
            <div class="wifi-bar-bottom"></div>
          </div>
          <p>答题正确率</p>
        </div>
      </div>

      <div class="left" style="width: 115px">
        <p class="t-center project-title">设备安全巡检</p>
        <p class="t-center project-number">{{safetyculter.subjectcnt}}</p>
        <p class="t-center">累计巡检数</p>
        <p class="t-center project-number">{{safetyculter.problemcnt}}</p>
        <p class="t-center mb20">累计整改问题量</p>
        <div style="width: 90px; height: 60px; margin: 0 auto;" ref="projectSafetyEchart"></div>
        <p class="t-center mt5">发现问题占比</p>
      </div>

      <div class="left" style="width: 172px">
        <p class="t-center project-title mb20">质量安全问题整改率</p>

        <div class="quality-rectification relative">
          <div style="width: 65px; height: 65px;" ref="qualityRectification"></div>
          <div class="quality-text quality-up">
            <div class="left line1"></div>
            <p class="left status">未整改</p>
            <p class="left number" :title="safetyculter.qualityNoChange">{{safetyculter.qualityNoChange}}</p>
          </div>
          <div class="quality-text quality-down">
            <div class="left line2"></div>
            <p class="left status">已整改</p>
            <p class="left number" :title="safetyculter.qualityChange">{{safetyculter.qualityChange}}</p>
          </div>
        </div>
        <p style="margin-left: 13px;">质量整改率</p>

        <div class="quality-rectification relative">
          <div style="width: 65px; height: 65px;" ref="safetyRectification"></div>
          <div class="quality-text quality-up">
            <div class="left line1"></div>
            <p class="left status">未整改</p>
            <p class="left number" :title="safetyculter.safeNochange">{{safetyculter.safeNochange}}</p>
          </div>
          <div class="quality-text quality-down">
            <div class="left line3"></div>
            <p class="left status">已整改</p>
            <p class="left number" :title="safetyculter.safeChange">{{safetyculter.safeChange}}</p>
          </div>
        </div>
        <p style="margin-left: 13px;">安全整改率</p>
      </div>
    </div>
  </div>
</template>

<script>
  import device from './device.js'
  import qualityRectification from './qualityRectification.js'
  import safetyRectification from './safetyRectification.js'
  import { mapGetters } from 'vuex'
  export default {
    name: 'safety',
    mixins: [device, qualityRectification, safetyRectification],
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        wifiHeight: {
          history: 30,
          today: 30
        },
        history: 0,
        today: 0,
        safetyculter: {
          educationcnt: 0,
          subjectcnt: 0,
          historyRightPercent: 0,
          todayRightPercent: 0,
          qualityNoChange: 0,
          qualityChange: 0,
          safeNochange: 0,
          safeChange: 0,
          problempercent: '0',
          problemcnt: 0
        },
        wifiBarFun: 18,
        height: 0
      }
    },
    mounted () {
      this.$nextTick(() => {
        const rectProson = this.$refs.projectSafety.getBoundingClientRect()
        this.height = rectProson.height - 40
        this.query()
        if (!this.safetyInterval) {
          this.safetyInterval = setInterval(() => {
            this.query()
          }, 1000 * 60 * this.$pollingTime)
        }
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.query()
        }
      }
    },
    activated () {
      this.query()
    },
    methods: {
      query () {
        this.findSafetyculter().then(() => {
          this.initProjectSafety()
          this.initQualityRectification()
          this.initSafetyRectification()
        })
      },
      findSafetyculter () {
        return new Promise(resolve => {
          const data = {
            'stageId': this.currentUser.stageId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/safetyculter/safetycultermanagerdata`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            if (res.data.data.hasOwnProperty('educationcnt')) {
              this.safetyculter = res.data.data
              if (res.data.data.historyRightPercent || res.data.data.todayRightPercent) {
                this.history = Number.parseInt(res.data.data.historyRightPercent * 100)
                this.today = Number.parseInt(res.data.data.todayRightPercent * 100)
                let percent = res.data.data.historyRightPercent - res.data.data.todayRightPercent
                if (percent === 0) {
                  this.wifiHeight.history = 30
                  this.wifiHeight.today = 30
                } else if (percent > 0) {
                  this.wifiHeight.history = percent * 30 + 30
                  this.wifiHeight.today = 60 - this.wifiHeight.history
                } else {
                  this.wifiHeight.today = Math.abs(percent) * 30 + 30
                  this.wifiHeight.history = 60 - this.wifiHeight.today
                }
                this.wifiBarFun = 0
              }
              resolve()
            }
          })
        })
      }
    }
  }
</script>

<style scoped lang='scss'>
 .project-safety-com{
   margin-top: -8px;
   >div{
     border: 1px rgba(8, 63, 81, 0.8) solid;
     padding: 10px 7px;
     box-sizing: border-box;
     margin-right: 10px;
     font-size: 12px;
     &:last-child{
       margin-right: 0;
     }
     .project-title{
       font-size: 16px;
       color: #00e8ff;
     }
     .project-number{
       font-weight: bold;
       font-size: 20px;
       color: #fff;
       margin: 15px 0 5px 0;
     }
   }
   .wifi-bar{
     margin-top: 20px;
     height: 120px;
     width: 27px;
     position: relative;
     .wifi-bar-bg{
       width: 17px;
       height: 12px;
       margin-top: 15px;
       margin-right: 5px;
       background-image: url("/static/images/bar-line.png");
     }
     .wifi-bar-text{
       font-weight: bolder;
       font-size: 14px;
       color: #fff;
       margin-bottom: 5px;
     }
     .wifi-history-head{
       width: 27px;
       height: 27px;
       background-image: url('/static/images/bgy-hostay-head.png');
       background-size: 100%;
     }
     .wifi-history-body{
       width: 27px;
       background-image: url('/static/images/bgy-hostay-body.png');
       background-repeat-y: repeat;
       .history-data{
         top: -20px;
         right: -55px;
         width: 55px;
         height: 30px;
       }
     }
     .wifi-history-bottom{
       width: 27px;
       height: 14px;
       background-image: url('/static/images/bgy-bar-hostay.png');
       background-size: 100%;
     }
     .wifi-bar-today{
       width: 27px;
       background-image: url('/static/images/bgy-bar-blue.png');
       background-repeat-y: repeat;
       .today-data{
         top: -15px;
         right: -55px;
         width: 55px;
         height: 30px;
       }
     }
     .wifi-bar-bottom{
       width: 27px;
       height: 11px;
       background-image: url('/static/images/bgy-bar-bottom.png');
       background-size: 100%;
     }
   }
   .quality-text{
     .status{
       margin-top: 1px;
       margin-right: 5px;
     }
     .number{
       font-size: 14px;
       font-weight: bold;
       color: #fff;
       width: 26px;
       @include ellipsis;
     }
   }
   .quality-up{
     position: absolute;
     top: 0;
     left: 40px;
     .line1{
       margin: 5px 5px 0 0;
       width: 33px;
       height: 14px;
       background-image: url("/static/images/line01.png");
       background-size: 100%;
     }
   }
   .quality-down{
     position: absolute;
     left: 40px;
     bottom: 0;
     .line2{
       margin: -5px 5px 0 0;
       width: 33px;
       height: 14px;
       background-image: url("/static/images/line02.png");
       background-size: 100%;
     }
     .line3{
       margin: -5px 5px 0 0;
       width: 33px;
       height: 14px;
       background-image: url("/static/images/line03.png");
       background-size: 100%;
     }
   }
   .quality-rectification{
     margin: 15px 5px 10px 5px;
   }
 }
</style>
